<template>
	<div>
		<el-row>
			<el-input v-model="input" placeholder="请输入商品名称" class='ipt'></el-input>
		</el-row>
		<template>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="商品 ID">
								<span>{{ props.row._id }}</span>
							</el-form-item>
							<el-form-item label="商品名称" >
								<span>{{ props.row.name }}</span>
							</el-form-item>
							<el-form-item label="商品价格">
								<span>{{ props.row.price }}</span>
							</el-form-item>
							<el-form-item label="商品描述">
								<span>{{ props.row.descriptions}}</span>
							</el-form-item>
							<el-form-item label="商品库存">
								<span>{{ props.row.quantity }}</span>
							</el-form-item>
							<el-form-item label="创建时间">
								<span>{{ props.row.updatedAt }}</span>
							</el-form-item>
							<el-form-item label="商品图片" >
								<span>{{ props.row.descriptions }}</span>
								<img :src="props.row.coverImg" alt="" class="img">
							</el-form-item>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column label="商品 ID" prop="_id" width='250'>
				</el-table-column>
				<el-table-column label="图片" width="220">
					<template slot-scope="props">
						<img :src="props.row.coverImg" alt="" class="imgs">
					</template>
				</el-table-column>
				<el-table-column label="商品名称" prop="name" width='250'>
					<template slot-scope='scope'>
						{{scope.row.name | aa}}
					</template>
				</el-table-column>
				<el-table-column label="描述" prop="descriptions">
					<template slot-scope='scope'>
						{{scope.row.name | aa}}
					</template>
				</el-table-column>
			</el-table>
		</template>
		<el-pagination background layout="prev, pager, next" :total="totalCount"
		@current-change="handleCurrentChange"
		 :current-page="currentPage"
		 class='fen'
		 >
		</el-pagination>
	</div>
</template>
<script>
	import * as api from '../api/Goods'
	export default {
		name: 'goodsDetail',
		data() {
			return {
				tableData: [],
				currentPage: 1,
				totalCount:50,
				input:''
			}
		},
		methods: {
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				api.products({
					per:6,
					page:this.currentPage
				}).then(res=>{
					this.tableData = res.data.products;
				})
			},
		},
		mounted() {
			api.products({
				per:6,
				page:1
			}).then(res => {
				this.totalCount = res.data.totalCount
				this.tableData = res.data.products;
			})
			
		},
		watch:{
			input:function(newVal){
				api.products({
					per:6,
					page:1,
					name:newVal
				}).then(res => {
					this.totalCount = res.data.totalCount
					this.tableData = res.data.products;
				})
			}
		},
		filters:{
			aa:function(val){
				if(val.length>10){
					return val.slice(0,10)+'...'
				}else{
					return val
				}
			}
		}
	}
</script>

<style scoped="">
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.img {
		width: 300px;
		display: block;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
		display: block;
	}
	.imgs{
		width: 55px;
		height: 55px;
	}
	.fen{
		position: absolute;
		left: 40%;
		bottom: 10px;
	}
</style>
